import { Checkbox, Input, InputProps } from "antd"
import { forwardRef } from "react"
import IconFont from "../IconFont"
import { CheckboxProps } from "antd/es/checkbox"

export interface ToolState extends Pick<CheckboxProps, "checked"> {
  search?: string
  freshKey?: number
}

interface ToolProps {
  search?: string
  searchProps?: false | Omit<InputProps, "value">
  fresh?: false | number
  // 全选的配置
  checkProps?: false | Omit<CheckboxProps, "checked" | "indeterminate">
  /**
   * @desc 全选的选中
   */
  checked?: boolean
  /**
   * @desc 是否半选
   */
  haflChecked?: boolean
  onChange?(value: ToolState): void
}

export const Tool = forwardRef<HTMLDivElement, ToolProps>(function Tool(
  {
    checkProps,
    checked,
    haflChecked,
    searchProps,
    search,
    fresh = 1,
    onChange
  },
  ref
) {
  const _onChange = (value: Partial<ToolState>) => {
    onChange?.(
      Object.assign(
        {
          search,
          checked
        },
        value
      )
    )
  }

  return (
    <div
      ref={ref}
      style={{
        padding: 8,
        display: "flex",
        flexDirection: "column",
        gap: 8
      }}
    >
      {/* 搜索和刷新功能 */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          flexShrink: 0
        }}
      >
        <Input
          prefix={
            <IconFont
              type="icon-search"
              height={22}
              style={{ marginRight: 2 }}
            />
          }
          placeholder="搜索"
          {...searchProps}
        />
        {fresh ? (
          <IconFont
            onClick={() => {
              _onChange?.({ freshKey: Math.random() + 1 })
            }}
            width={32}
            height={32}
            type="icon-refresh"
            size={20}
            pointer
          />
        ) : null}
      </div>
      {/* tabs选择功能,todo待开发 */}
      {/* <Tabs
        type="card"
        tabBarStyle={{ background: "#fff" }}
        tabBarGutter={0}
        items={[
          { label: "人员部门", key: "department", style: { borderRadius: 4 } },
          { label: "角色", key: "role" }
        ]}
        [
          { key: "0", name: "通讯录" },
          { key: "djsklaflsd", name: "部门1" },
          { key: "师大附近开了大数据", name: "部门2" },
          { key: "师大附近开了大数据千万额外", name: "部门3" },
          { key: "为奇瑞哦去玩儿", name: "部门4" }
        ]
      /> */}
      {/* 全选功能,内置该功能,提供设置的方法 */}
      {checkProps ? (
        <div>
          <Checkbox
            {...checkProps}
            indeterminate={haflChecked}
            checked={checked}
            onChange={(e) => {
              checkProps.onChange?.(e)
              _onChange({ checked: e.target.checked })
            }}
          >
            全选
          </Checkbox>
        </div>
      ) : null}
    </div>
  )
})
